<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 300px;
            border: 1px  solid;
            margin: 0  auto;
            position: relative;
            overflow: hidden;
        }
        ul{
            display: flex;
            width: 2500px;
            background-color: darkviolet;
            position: absolute;
            left: 0;
            top: 0;
        }
        li{
            list-style: none;
            height: 300px;
            text-align: center;
            line-height: 300px;
            font-size: 40px;
            color: black;
            width: 500px;
        }
        span{
            position: absolute;
            top: 50%;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid;
            transform: ;
        }
    </style>
</head>
<body>
    <div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul> 
    <span class="left">></span>
    <span class="right">></span>
</div>

<script>
    function rdc() {
        return  Math.floor(Math.random()*(255-0+1)+0)
    }
    // 改变li颜色
    let ul = document.querySelector('ul');  
    let li = ul.children
    for (let i = 0; i < li.length; i++) {
        li[i].style.background=`rgb(${rdc()},${rdc()},${rdc()})`
        
    }
    // 点击右侧按钮
    let right = document.querySelector('.right')
    let x = 0
    right.onclick =  function () {
        x++
        console.log(x);
        ul.style.left = x*-500+'px'
        
        
    }
    // 点击左侧按钮
    let right = document.querySelector('.right')
    right.onclick =  function () {
        x--
        console.log(x);
        ul.style.left = x*-500+'px'
        
        
    }

</script>
</body>
</html>